import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WidgetComponent } from '../../models/layout.models';

@Component({
  selector: 'app-view-widget',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="component">
      <div class="component-header">
        <div class="component-title">
          <i class="material-icons">dashboard</i>
          {{widget.title}}
        </div>
        <div class="component-actions">
          <button (click)="onSettings()"><i class="material-icons">settings</i></button>
          <button (click)="onDelete()"><i class="material-icons">delete</i></button>
        </div>
      </div>
      <div class="component-content">
        <div class="view-content">
          <div class="metric">
            <div class="metric-value">1,234</div>
            <div class="metric-label">总用户数</div>
          </div>
          <div class="metric">
            <div class="metric-value">567</div>
            <div class="metric-label">活跃用户</div>
          </div>
          <div class="metric">
            <div class="metric-value">89%</div>
            <div class="metric-label">转化率</div>
          </div>
        </div>
      </div>
    </div>
  `,
  styleUrls: ['./widgets.component.scss']
})
export class ViewWidgetComponent {
  @Input() widget!: WidgetComponent;
  @Output() delete = new EventEmitter<void>();

  onSettings() {
    console.log('Settings clicked for widget:', this.widget.id);
  }

  onDelete() {
    this.delete.emit();
  }
}
